<template>
<view>
  <uni-drawer :visible="rightDrawerVisible" mode="left" @close="closeRightDrawer">
     <view  class="commodity_attr_box" v-if="!showModalStatus">
    <view>
      <view class='transactionType'>选择交易类型</view>
      <view class='type-box'>
        <view :class='["type-item",item.id==tradeId ? "type-active" :""]' v-for="(item,index) in coinType" :key="index" :data-id='item.id' @click='switchTradeType'>{{item.desc}}</view>
      </view>
      <view class='cancel' @click="closeRightDrawer">取消</view>
    </view>
  </view>
  </uni-drawer>
</view>
</template>
<script>
import uniDrawer from "../../components/uni-drawer/uni-drawer";
let app = getApp();
export default {
  props: ["coinType","showModalStatus","tradeId"],
  components: {
    uniDrawer
  },
  data() {
    return {
      rightDrawerVisible: false,
    };
  },
  created() {
    console.log(this.coinType)
  },
  methods: {
    closeRightDrawer() {
      this.rightDrawerVisible = false;
    },
    showRightDrawer() {
      this.rightDrawerVisible = true;
    },
    switchTradeType(e){
    this.$emit("switchTradeType", e);
    }
  }
};
</script>

<style>

.commodity_attr_box {
  width: 100%;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 2000;
  background: #fff;
}

.transactionType {
  font-size: 34rpx;
  color: #333;
  border-bottom: 1rpx solid #d4d7da;
  text-align: center;
  height: 90rpx;
  line-height: 90rpx;
}

.type-box {
  display: flex;
  flex-wrap: wrap;
  /* justify-content: space-between; */
  margin: 0rpx 40rpx 30rpx;
  font-size: 28rpx;
  color: #5d656b;
}

.type-item {
  width: 208rpx;
  height: 88rpx;
  border-radius: 10rpx;
  border: 1rpx solid #d4d7da;
  background: #f9f9f9;
  line-height: 88rpx;
  text-align: center;
  margin-top: 30rpx;
  margin-right: 17rpx;
}
.type-item:nth-child(3n){
  margin-right: 0;
}

.cancel {
  height: 90rpx;
  border: 1rpx solid #d4d7da;
  text-align: center;
  line-height: 90rpx;
  font-size: 34rpx;
  color: #333;
}

.type-active {
  background: #e9605f;
  color: #fff;
  border: 1rpx solid #e9605f;
}
.uni-drawer>.uni-drawer-content{
    height:auto;
}
</style>
